layui.use(["echarts"], function () {
  let echarts = layui.echarts;
  var column1 = echarts.init(document.getElementById("column1"), null, {
    width: 600,
    height: 400,
  });
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        color: "#fff",
        fontSize: "26",
      },
    },
    legend: {
      top: "5%",
      right: "10%",
      data: ["猕猴桃", "香蕉"],
      fontSize: 12,
      color: "#808080",
      icon: "rect",
    },
    grid: {
      top: 60,
      left: 50,
      bottom: 60,
      right: 60,
    },
    xAxis: [
      {
        type: "category",
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "#4D4D4D",
          fontSize: 14,
          margin: 21,
          fontWeight: "bold",
        },
        data: ["第一周", "第二周", "第三周", "第四周"],
      },
    ],
    yAxis: [
      {
        name: "单位：万",
        nameTextStyle: {
          color: "#808080",
          fontSize: 12,
          padding: [0, 0, 0, -5],
        },
        max: function (value) {
          if (value.max < 5) {
            return 5;
          } else {
            return value.max;
          }
        },
        type: "value",
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "#808080",
          fontSize: 12,
          margin: 5,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "猕猴桃",
        type: "bar",
        label: {
          show: true,
          position: "top",
          fontSize: 14,
          color: "#3DC3F0",
          fontWeight: "bold",
        },
        barMaxWidth: 60,
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#3DC3F0", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#CCF2FF", // 100% 处的颜色
            },
          ],
        },
        data: [60, 110, 180, 100],
      },
      {
        name: "香蕉",
        type: "bar",
        label: {
          show: true,
          position: "top",
          fontSize: 14,
          color: "#3D8BF0",
          fontWeight: "bold",
        },
        barMaxWidth: 60,
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#3D8BF0", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#CCE2FF", // 100% 处的颜色
            },
          ],
        },
        data: [90, 130, 170, 130],
      },
    ],
  };

  column1.setOption(option);

  window.onresize = function () {
    column1.resize();
  };
});
